<template>
  <div class="filter-bar">
    <el-form :inline="true" label-width="70px" class="filter-form">
      <el-form-item label="母设备">
        <el-select
          v-model="filters.muName"
          placeholder="请选择母设备"
          clearable
          filterable
          style="width: 220px"
        >
          <el-option
            v-for="item in muOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> 

      <el-form-item label="">
        <el-input
          v-model="filters.keyword"
          placeholder="母设备名称或编码关键字"
          clearable
          style="width: 220px"
          @keydown.enter.prevent="emitSearch"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="emitSearch">
          <el-icon><Search /></el-icon> 搜索
        </el-button>
        <el-button @click="resetFilters">
          <el-icon><Refresh /></el-icon> 重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { listSbtz } from '@/api/sbtz/sbtz'

const emit = defineEmits(['search'])
const filters = reactive({ muName: null, keyword: '' })
const muOptions = ref([])


// script setup 里
const selectOpen = ref(false)

function onSelectOpenChange(open) {
  selectOpen.value = open
}

function onSelectEnter() {
  // 只有在下拉面板关闭时，才用回车触发搜索
  if (!selectOpen.value) emitSearch()
}


async function loadMuOptions() {
  const { rows = [] } = await listSbtz({
    nodeType: 'MACHINE',
    pageNum: 1,
    pageSize: 1000
  })
  muOptions.value = rows
}

function emitSearch() {
  emit('search', { ...filters })
}
function resetFilters() {
  filters.muName = null
  filters.keyword = ''
  emitSearch()
}

onMounted(() => loadMuOptions())
</script>

<style scoped>
.filter-bar {
  background: #fff;
  padding: 10px 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  margin-bottom: 12px;
}
.filter-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.el-form-item {
  margin-bottom: 0 !important;
}
</style>
